<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BootStrapTableDemo</title>
	<link href="../static/css/bootstrap.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap/css/bootstrap-table.css" />
	<script type="text/javascript" src="../static/js/jquery-1.7.2.js"></script>
	<script src="../static/js/bootstrap.min.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap-table.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap-table-zh-CN.js"></script>
	<style type="text/css">
		.test{
			color:red;		
		}
	</style>
</head>
<body>
<div>
	<table id="table"></table>
</div>
</body>
<script type="text/javascript">
var key = 1;
			top.hangge();
			$('#table').bootstrapTable({
			    url: 'listUsers1.do',
				contentType: "application/x-www-form-urlencoded",
				// 数据绑定
				method : 'post',
				striped : true,
				dataType : "json",
				pagination : true,
				pageSize : 3,
				pageNumber : 1,
				sidePagination: "server",
				queryParamsType : "limit",
				singleSelect : false,
				queryParams	: queryParams,
				pageList : [2, 3, 50, 100],
			    columns: [{
			        field: 'user_ID',
			        title: 'ID',
			        width:'10%',
			        checkbox:true
			        
			    }, {
			        field: 'username',
			        title: '用户名',
			        width:'30%'
			    }, {
			        field: 'name',
			        title: '名字',
			        searchable :true,
			        cellStyle : function(){
			        	return {
			        		classes:'test',
			        		css:{"cursor":"pointer"}
			        	};
			        }
			    } , {
			        title: '操作',
			        cellStyle : function(){
			        	return {
			        		classes:'test',
			        		css:{"cursor":"pointer"}
			        	};
			        },
			        formatter:"actionFormatter",
			    	events:"actionEvents"
			    } ]
			});
			/*  function actionFormatter(value, row, index) {
			        return ['<a class="btn btn-mini btn-info" title="编辑"',
			         'onclick="editmenu('+row.menu_ID+')" >',
			         '<i class="icon-edit"></i></a>',
					'<a class="btn btn-mini btn-danger" title="删除"',
					'onclick="delmenu('+row.menu_ID+',true)">',
					'<i class="icon-trash"></i></a>'].join('');
			 } */
			 function actionFormatter(value, row, index) {
			        return '<a class="mod" >修改</a> ' + '<a class="delete">删除</a>';
			    }
			    //表格  - 操作 - 事件
			    window.actionEvents = {
			        'click .mod': function(e, value, row, index) {      
			             alert(row.menu_ID);
			            },
			        'click .delete' : function(e, value, row, index) {
			        	 alert("删除");
			            }
			        }
			function queryParams(params) {
				return {
					size : params.limit,
					page : params.pageNumber,
					key : key
				};
			}
			
			$('#table').on('click','.test', function (e){
				testsomething();
			});
			function testsomething(){
				key = 4;
				$('#table').bootstrapTable('refresh',{
					url: 'listUsers1.do',
					contentType: "application/x-www-form-urlencoded",
					// 数据绑定
					method : 'post',
					striped : true,
					dataType : "json",
					pagination : true,
					pageSize : 3,
					pageNumber : 2,
					sidePagination: "server",
					queryParamsType : "limit",
					singleSelect : false,
					queryParams	: refreshParameters
				});
			}
			
	</script>
</html>